<template>
	<view class="header">
		<uni-card :cover="cover">
			<image  style="width: 100%; height: 600rpx;" :src="curGoods.img"></image>
			<text class="uni-body">{{ curGoods.name }}</text>
			<view>
				<text class="uni-body">￥ {{ tempPrice }}</text>
			</view>
			<view class="btn-area">
				<text>规格：</text>
				<button :class="{ active:curGuiGe==='L'}" @click="doSelect('L')">大杯</button>
				<button :class="{ active:curGuiGe==='M'}" @click="doSelect('M')">中杯</button>
				<button :class="{ active:curGuiGe==='S'}" @click="doSelect('S')">小杯</button>
			</view>
			<view class="btn-area">
				<text>温度：</text>
				<button>加冰</button>
				<button>常温</button>
			</view>
			<view>
				<uni-section >
					<uni-goods-nav  @buttonClick="onClick"/>
				</uni-section>
			</view>
		</uni-card>
	</view>
</template>

<script setup>
	
	import  {API_HOST}  from  '/config/const.js'
	
	import {
		onLoad
	} from "@dcloudio/uni-app";

	import {
		ref
	} from 'vue';



	onLoad((options) => {
		console.log(options.id)
		query(options.id)
	})

	const curGoods = ref({})
	const curGuiGe = ref('M')

	const tempPrice = ref('0')

	const doSelect = (g) => {
		curGuiGe.value = g
		switch (g) {
			case "L":
				tempPrice.value = Number.parseFloat(curGoods.value.price) + 5.00;
				break;
			case "M":
				tempPrice.value = Number.parseFloat(curGoods.value.price);
				break;
			case "S":
				tempPrice.value = Number.parseFloat(curGoods.value.price) - 5.00;
				break;
			default:
				break;
		}
	}

	const query = (id) => {
		uni.request({
			url: `${API_HOST}/goods/${id}`, //仅为示例，并非真实接口地址。
			success: (res) => {
				curGoods.value = res.data;
				tempPrice.value = res.data.price
				console.log(tempPrice);
			},
		});
	}
	
	const onClick =(e)=>{
		if(e.index === 0){
			const json = uni.getStorageSync("loginUser");
			if(json){
				const userObject = JSON.parse(json);
				uni.request({
					url:`${API_HOST}/carts`,
					method:'post',
					data:{
						goods:curGoods.value,
						count:1,
						size:curGuiGe.value,
						actualPrice:tempPrice.value,
						remark:"冰",
						memberId: userObject.id
					},
					success(res){
						uni.showToast({
							title:'已经加入购物车',
							duration:2000
						}),
						uni.switchTab({
							url:'/pages/index/index'
						})
					}
				})
			}else{
			uni.showToast({
				title:'下单前，请先登录',
				duration:2000,
			})
			uni.redirectTo({
					url: '/pages/login/login'
				})
		}
		}
	}
	
</script>

<style scoped>
	.uni-body {
		justify-content: center;
		text-align: center;
	}

	.btn-area {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
		margin: 20rpx;

	}

	.btn-area button {
		text-align: center;
	}

	.active {
		background-color: lightblue;
		color: royalblue;
		font-weight: bold;
	}
</style>